.editor-confirmation-sidebar {
	position: absolute;
	top: -100px;
	right: -100px;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;

	&.is-active {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		height: auto;
		overflow: auto;
		visibility: visible;
	}
}

.editor-confirmation-sidebar__publishing-button {
	padding: 7px 22px;
	position: absolute;
	top: 51px;
	right: 24px;
	min-width: 142px;
}

.editor-confirmation-sidebar__sidebar {
	display: flex;
	flex-direction: column;
	width: $sidebar-width-max;
	background: var( --color-neutral-0 );
	border-left: 1px solid var( --color-neutral-5 );
	border-right: none;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	left: auto;
	right: -$sidebar-width-max;
	z-index: z-index( 'root', '.editor-confirmation-sidebar__sidebar' );
	transition: all 0.15s cubic-bezier( 0.075, 0.82, 0.165, 1 );

	&.is-active {
		transform: translateX( -$sidebar-width-max );
	}

	@include breakpoint-deprecated( '<660px' ) {
		transition: none;
		border-left: none;
		pointer-events: auto;

		&.is-active {
			height: auto;
			width: 100%;
			position: fixed;
			top: 0;
			right: auto;
			left: 0;
			transform: none;
		}
	}
}

.editor-confirmation-sidebar__ground-control {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	min-height: 46px;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 24px;
	box-sizing: border-box;
	background: var( --color-surface );
	box-shadow:
		0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ),
		0 1px 2px var( --color-neutral-0 );
}

.editor-confirmation-sidebar__close {
	margin-right: auto;
}

.editor-confirmation-sidebar__action .button {
	padding: 7px 24px;
	min-width: 120px;
	margin: 4px 0 4px 12px;
}

.editor-confirmation-sidebar__content-wrap {
	padding: 16px 24px 24px;
	flex: auto;
}

.editor-confirmation-sidebar__sidebar .editor-confirmation-sidebar__display-preference {
	background-color: var( --color-neutral-5 );
	padding: 12px;

	@include breakpoint-deprecated( '<660px' ) {
		padding: 24px;
	}

	.form-label {
		margin-bottom: 0;
	}
}

.editor-confirmation-sidebar__header {
	color: var( --color-neutral-70 );
	font-size: $font-body;
	padding-bottom: 24px;
}
